import { NakePanel, LayerLink, ImgHolder } from 'comps/common';
import { Tabs, Icon } from 'antd';
import RunnableGroup from 'comps/runnable-group';
import TeamMembers from '../containers/team-members';
import TeamConfig from '../containers/team-config';
import _ from 'lodash';

const TabPane = Tabs.TabPane;

const GroupList = ({ groups }) => {
  const liGroup = groups.map(({ id, name, desc }) => {
    return (
      <li key={id} className='group-list-item'>
        <h3 className='group-list-name'><LayerLink component={RunnableGroup} data={{ id }}>{name}</LayerLink></h3>
        {_.isEmpty(desc) ? undefined : <p className='group-list-desc'>{desc}</p>}
      </li>
    );
  });

  return (
    <ul className='group-list list'>
      {liGroup}
    </ul>
  );
};

const DevTeamDetail = ({ isTeamLeader, isFetching, fetched, detail }) => {
  if (!fetched && _.isEmpty(detail)) {
    return <NakePanel spinner={isFetching}/>;
  }

  const tabs = [
    {
      title: <span><Icon type='share-alt'/> 负责的项目 <span className='label'>{detail.runnableGroups.length}</span></span>,
      content: <GroupList groups={detail.runnableGroups}/>
    },
    {
      title: <span><Icon type='team'/> 成员 <span className='label'>{detail.members.length}</span></span>,
      content: <TeamMembers members={detail.members} teamId={detail.devTeam.id}/>
    }
  ];
  if (isTeamLeader) {
    tabs.push({
      title: <span><Icon type='setting'/> 设置</span>,
      content: <TeamConfig devTeam={detail.devTeam}/>
    });
  }

  return (
    <NakePanel spinner={isFetching}>
      <div className='dev-team-detail'>
        <div className='dev-team-head card-head flex-table'>
          <ImgHolder src={detail.devTeam.logo} className='dev-team-logo flex-table-item' rect='100x100' random='yes' text={detail.devTeam.name}/>
          <div className='flex-table-item flex-table-item-primary'>
            <div className='dev-team-name'>{detail.devTeam.name}</div>
            <div className='dev-team-desc'>{detail.devTeam.desc}</div>
          </div>
        </div>
        <div className='card-content'>
          <Tabs>
            {tabs.map((tab, index) => <TabPane tab={tab.title} key={index}>{tab.content}</TabPane>)}
          </Tabs>
        </div>
      </div>
    </NakePanel>
  );
};

export default DevTeamDetail;
